<style type="text/css" media="screen">
  .submission {
    max-width: 960px;
  }
  .submission-table {
    background-color: #fefefe;
    width: 100%;
  }
  .submission-table th, td {
    padding: 5px;
  }
  .submission-table th {
    text-align: right;
    width: 120px;
    font-weight: bold;
  }
</style>


<div class="submission">
  <table class="submission-table">
    <tr>
      <th>Changes for</th>
      <td><a href="{% url 'game_detail' change.change_for.slug %}">{{ change.change_for.name }}</a></td>
    </tr>
    <tr>
      <th>From</th>
      <td><a href="{% url 'admin:accounts_user_change' change.author.id %}">{{ change.author }}</a></td>
    </tr>
    <tr>
      <th>Reason</th>
      <td>{% if change.reason %} {{ change.reason }} {% else %} <em>No reason given</em> {% endif %}</td>
    </tr>
    <tr>
      <th>Changes</th>
      <td style="padding: 0;">
        <table style="width: 100%; border: 0;">
          {% for entry, old_value, new_value in change.diff %}
            <tr>
              <th style="width: 50px;">field</th>
              <td>{{ entry }}</td>
            </tr>
            {% if old_value %}
              <tr style="color: #770000; background-color: #fbe9eb; font-family: monospace;">
                <th>--</th>
                <td>
                {% if entry == "title_logo" %}
                  <img src="{{ MEDIA_URL }}{{ old_value }}"/>
                {% else %}
                  {{ old_value }}
                {% endif %}
                </td>
              </tr>
            {% endif %}
            {% if new_value %}
              <tr style="color: #007700; background-color: #ecfdf0; font-family: monospace;">
                <th>++</th>
                <td>
                {% if entry == "title_logo" %}
                  <img src="{{ MEDIA_URL }}{{ new_value }}"/>
                {% else %}
                  {{ new_value }}
                {% endif %}
                </td>
              </tr>
            {% endif %}
          {% endfor %}
        </table>
      </td>
    </tr>
    <tr>
      <th>Actions</th>
      <td>
        <a href="{% url 'admin-change-submission-accept' change.id %}?redirect={{ request.get_full_path }}"
          class="grp-button grp-default">Accept</a>
        <a href="{% url 'admin-change-submission-reject' change.id %}?redirect={{ request.get_full_path }}"
          class="grp-button grp-delete-link">Reject</a>
        <a href="{% url 'admin:games_game_change' change.id %}"
          style="color: #309bbf; background: none; border: none;"
          class="grp-button grp-default">Edit change</a>
      </td>
    </tr>
  </table>
</div>
